<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="http://1.95.157.217/wmap/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="http://1.95.157.217/wmap/index.css">
    <title>WMap</title>
    <style>
      .header {
        width: 90%;
        display: flex;
        align-items: center;
      }
      .header .item {
        padding: 10px 20px;
        border: 1px solid #000;
      }
      .header .active {
        background-color: yellow;
      }
      .body {
        height: 60vh;
        width: 90%;
      }
      .body .item {
        width: 100%;
        height: 100%;
        border: 1px solid #000;
        display: none;
      }
      .body .active {
        display: block;
      }
      .dz {
        position: absolute;
        right: 20px;
        top: 20px;
        display: inline-flex;
        align-items: center;
      }
      .dz span {
        margin-right: 10px;
      }
      .dz div {
        border: 1px solid #eee;
        height: 50px;
        line-height: 50px;
        width: 50px;
        text-align: center;
      }
      svg{
        width: 50px;
        position: relative;
        z-index: 0;
      }
      #heart{
          fill:#eee;
          /* stroke 属性可应用于任何种类的线条，文字和元素，就像一个
          圆的轮廓 */
          stroke:var(--jjext-color-tips);
          /* 线条宽度 */
          stroke-width: 40px;
          /* 设置线条为虚线，虚线的长度 */
          stroke-dasharray: 2600;
          /* 线条的位移 */
          stroke-dashoffset: 2600;
          /* 端点为圆头 */
          stroke-linecap: round;
      }
      #checkbox:checked + svg #heart{
          animation: drawHeart 1s linear forwards;
      }
      label{
          cursor: pointer;
      }
      #checkbox:checked + svg{
          animation: beat 1s linear forwards;
      }
      @keyframes drawHeart{
          0%{
              stroke-dashoffset: 2600;
          }
          80%{
              fill:#eee;
              stroke-dashoffset: 0;
          }
          100%{
              fill: var(--jjext-color-tips);
              stroke-dashoffset: 0;
          }
      }
      @keyframes blink {
          0%{
              transform: translate(-50%,-50%) scale(0.5);
              opacity: 0.8;
          }
          50%{
              transform: translate(-50%,-50%) scale(1);
              opacity: 1;
          }
          100%{
              transform: translate(-50%,-50%) scale(1.1);
              opacity: 0;
          }
      }
      /* 心跳动画 */
      @keyframes beat{
          0%{
              transform: scale(1);
          }
          70%{
              transform: scale(1);
          }
          80%{
              transform: scale(1.2);
          }
          100%{
              transform: scale(1);
          }
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div style="padding:20px;text-align: left;">
        <button style="margin-left: 20px;"><a href="./home.html">主要</a></button>
        <button style="margin-left: 20px;"><a href="./heatmap.html">热力图</a></button>
        <button style="margin-left: 20px;"><a href="./trackPlayback.html">轨迹回放</a></button>
        <button style="margin-left: 20px;"><a href="./marker-text-label.html">点标记</a></button>
        <button style="margin-left: 20px;"><a href="./markerclusterer.html">点聚合</a></button>
        <button style="margin-left: 20px;"><a href="./mapType.html">地图类型切换</a></button>
        <button style="margin-left: 20px;"><a href="./graph.html">画图</a></button>
        <button style="margin-left: 20px;"><a href="./infoWindow.html">信息弹框</a></button>
        <button style="margin-left: 20px;"><a href="./tool.html">工具栏</a></button>
        <div class="dz">
          <span>还可以的话就点个赞吧!</span>
          <div>
            <label for="checkbox" title="赞助地址：位于gitee上的本项目的README文件" >
              <input type="checkbox" id="checkbox" hidden>
              <svg t="1651108144758" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                  p-id="3464" >
                  <path
                      d="M512 896a42.666667 42.666667 0 0 1-30.293333-12.373333l-331.52-331.946667a224.426667 224.426667 0 0 1 0-315.733333 223.573333 223.573333 0 0 1 315.733333 0L512 282.026667l46.08-46.08a223.573333 223.573333 0 0 1 315.733333 0 224.426667 224.426667 0 0 1 0 315.733333l-331.52 331.946667A42.666667 42.666667 0 0 1 512 896z"
                      p-id="3465" id="heart"></path>
              </svg>
            </label>
          </div>
          <div class="dz-count" title="当前点赞的帅哥靓女数"></div>
        </div>
      </div>
      <div>
        <h1>tab标签栏切换</h1>
        <div class="header" id="head">
          <div class="item active" id="head-0">
            地图介绍
          </div>
          <div class="item" id="head-1">
            地图实例
          </div>
        </div>
        <div class="body" id="body">
          <div class="item active">
            <p>基于openlayers6 开发的地图库</p>
            <p>WMap: Wonderful Map </p>
            <p>博客地址： https://blog.csdn.net/qq_39404437/article/details/123628440</p>
            <p>csdn： 林大大哟, 有bug/建议 请关注我并私聊 / gitee提 issue</p>
            <p>本地开发环境：本项目由vite启动，安装依赖使用pnpm/npm, 启动后 请添加 /demos/home.html 导航到对应demo示例</p>
            <p>例如: http://localhost:3000/demos/home.html</p>
            <p>生产环境：打包请使用 pnpm/npm run build, 然后根据你的需求，使用其中 umd.js/es.js的包，并且引入样式表 index.css</p>
          </div>
          <div class="item">
            <div id="map" style="height: 100%;"></div>
          </div>
        </div>
      </div>
    </div>
    <script src="http://1.95.157.217/wmap/wmap.umd.js"></script>
    <script type="module" src="./home.js"></script>
  </body>
</html>
